<template>
 <button @click="start">开始倒计时</button>
 <button @click="stop">停止倒计时</button>
 <h1>{{countTime}}</h1>
</template>

<script>
import { ref } from 'vue'
import { useIntervalFn } from '@vueuse/shared'
const useCountDown = (time = 60) => {
  // 定义停止倒计时时间
  const countTime = ref(0)
  // 解构 useIntervalFn返回的函数
  const { resume, pause } = useIntervalFn(() => {
    // 时间自减
    countTime.value--
    // 判断是否为 0 ，如果为 0，则停止定时器
    if (countTime.value <= 0) pause()
    // 设置多少秒执行一次，是否立即执行
  }, 1000, { immediate: false })
  // 开始倒计时，并设置倒计时的出初始值
  const start = () => {
    if (countTime.value <= 0) countTime.value = time
    // 开始定时器
    resume()
  }
  // 关闭定时器
  const stop = () => {
    pause()
  }
  return { countTime, start, stop }
}
export default {
  setup () {
    const { countTime, start, stop } = useCountDown(5)
    return { countTime, start, stop }
  }
}
</script>

<style>

</style>
